<template>
	<view class="page">
		<image src="/static/logo.png" class="logo"></image>
		<view class="title">
			<u--text text="醇易佳小程序" size=20 align="center" bold margin="20rpx 0 14rpx 0"></u--text>
		</view>

		<u--text text="轻松出行  轻松加醇" size=12 align="center"></u--text>

		<view class="btn" @click="login">
			<u-button text="手机号快捷登录" color="#3662EC" shape="circle" size="large" openType="getPhoneNumber"
				@getphonenumber="getPhoneNumber"></u-button>
		</view>

		<view class="info">
			<view class="circle" :class="{ active: isActive }" @click="select"></view>
			<span>同意</span>
			<span class="blue" @click="goToService">《用户服务协议》</span>
			<span>和</span>
			<span class="blue" @click="goToPrivacy">《用户隐私政策》</span>
		</view>

	</view>
</template>
<script>
export default {
	data() {
		return {
			isActive: false
		}
	},
	methods: {
		goToService() {
			uni.navigateTo({
				url: '/pages/webView/webView?url=www.baidu.com'
			})
		},
		goToPrivacy() {
			uni.navigateTo({
				url: '/pages/webView/webView?url=www.baidu.com'
			})
		},
		select() {
			this.isActive = !this.isActive
		},
		login() {
			if (!this.isActive) {
				uni.showToast({
					icon: 'none',
					title: '请勾选同意'
				})
			}

		},
		getPhoneNumber(ev) {
			const {
				encryptedData,
				errMsg,
				iv
			} = ev.detail
			console.log(ev, "evvvvvvvv")
			//if (errMsg.indexOf(':ok') > -1) {
			uni.showLoading({
				title: '登录中...',
				mask: true,
			})
			wx.login({
				success: async (res) => {
					// let params = {
					//     code,
					// }
					console.log(res, "ressssssssss")
				},
			})
			//}
		}
	}
}
</script>
<style lang="scss" scoped>
.page {
	background-color: white;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;

	::v-deep .u-text {
		flex: 0;
	}
}

.logo {
	width: 80px;
	height: 80px;
	margin-top: 200rpx;
}

.title {
	letter-spacing: 3rpx;
}

.btn {
	width: 520rpx;
	margin: 100rpx 0 50rpx 0;
}

.info {
	font-size: 12px;
	display: flex;
	align-items: center;

	.circle {
		width: 10px;
		height: 10px;
		border: 1px black solid;
		border-radius: 10px;
		margin-right: 10rpx;

		&.active {
			background-color: #3662EC;
			border-color: #3662EC;
		}
	}

	.blue {
		color: #34B6E5;
	}
}
</style>
